<script lang="ts" setup>
import { onMounted, ref, watch } from "vue"
import { getLazyList, create, update, del, getTreeList } from "@/api/system-api/dictionary/index"
import { DictionaryQuery } from "@/api/system-api/dictionary/types/dictionaryQuery"
import { useTableTreeDataMember, useDataDialogMember, useTreeMember } from "@/hooks/commonData/useCommonData"
import { Dictionary } from "@/api/system-api/dictionary/types/dictionary"
import { Search, Plus, Delete, Edit, Pointer } from "@element-plus/icons-vue"
defineOptions({
  name: "字典管理"
})
const listQuery: DictionaryQuery = {
  parentId: null,
  page: 1,
  limit: 10
}
const entity = { displayType: "text", tagType: "primary" } as Dictionary
const {
  tableRef,
  tableLoadingRef,
  queryRef,
  totalRef,
  tableDataRef,
  getList,
  handleSizeChange,
  handleCurrentChange,
  load,
  reload
} = useTableTreeDataMember(listQuery, getLazyList, ["id", "parentId", "parentId"])
//(t) => t.id == null || t.id == undefined
const {
  formRef,
  entityRef,
  dialogStatus,
  currentRef,
  getCurrent,
  handleCreate,
  handleUpdate,
  handleDelete,
  handleDetail,
  submit
} = useDataDialogMember(entity, create, update, del, [["id", "id"]], reload)
const { optionsRef, getTree } = useTreeMember(getTreeList)
const optionProp = {
  value: "id",
  label: "name",
  children: "children"
}
const rules = {
  name: [{ required: true, message: "请输入节点名称", trigger: "blur" }]
}
function tableRowClassName({ rowIndex }: any): string {
  if (rowIndex === 0) {
    return "el-button--primary is-active"
  }
  return ""
}
const headerClass = (data: { row: any; rowIndex: number }): string => {
  console.log(data)
  return "warning-row"
}
watch(dialogStatus, (newVal: boolean) => {
  if (newVal) {
    getTree()
  }
})
const displayType = ref([
  { name: "文本", value: "text" },
  { name: "标签", value: "tag" }
])
const tagTypeRef = ref([
  { name: "蓝色", value: "primary" },
  { name: "绿色", value: "success" },
  { name: "灰色", value: "info" },
  { name: "黄色", value: "warning" },
  { name: "红色", value: "danger" }
])
const tagThemeRef = ref([
  { name: "黑暗", value: "dark" },
  { name: "明亮", value: "light" },
  { name: "线条", value: "plain" }
])
onMounted(async () => {
  await getList()
})
</script>

<template>
  <div class="app-container">
    <el-row style="margin-bottom: 5px" :gutter="20">
      <el-col :span="6">
        <el-button type="primary" :icon="Search" @click="getList">搜索</el-button>
        <el-button type="primary" :icon="Plus" @click="handleCreate">新增</el-button>
      </el-col>
    </el-row>

    <el-card header="字典管理">
      <el-table
        :data="tableDataRef"
        v-loading="tableLoadingRef"
        border
        fit
        highlight-current-row
        stripe
        element-loading-text="给我一点时间"
        :header-cell-class-name="tableRowClassName"
        lazy
        :load="load"
        row-key="id"
        ref="tableRef"
        :header-row-class-name="headerClass"
      >
        <el-table-column label="id" prop="id" show-overflow-tooltip />
        <el-table-column label="名称" prop="name" show-overflow-tooltip />
        <el-table-column label="字典值" prop="value" show-overflow-tooltip />
        <el-table-column label="code" prop="code" show-overflow-tooltip />
        <el-table-column label="备注" prop="remark" show-overflow-tooltip />
        <el-table-column label="父Id" prop="parentId" show-overflow-tooltip />
        <el-table-column label="序号" prop="sortNO" show-overflow-tooltip />
        <el-table-column label="显示样式" prop="displayType" show-overflow-tooltip />
        <el-table-column label="颜色" prop="tagType" show-overflow-tooltip />
        <el-table-column label="主题" prop="tagTheme" show-overflow-tooltip />
        <el-table-column label="操作" width="300">
          <template #default="scope">
            <el-button-group>
              <el-button type="primary" :icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button type="info" :icon="Pointer" @click="handleDetail(scope.row)">详情</el-button>
              <el-button type="danger" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center; margin-top: 15px">
        <el-pagination
          :current-page="queryRef.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryRef.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRef"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="justify-content: center"
        />
      </div>
    </el-card>
    <el-dialog v-model="dialogStatus" :modal-append-to-body="false" :close-on-click-modal="false" :title="getCurrent()">
      <el-form ref="formRef" :model="entityRef" :rules="rules" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="节点名称" prop="name">
              <el-input v-model="entityRef.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="父级节点">
              <el-tree-select
                :data="optionsRef"
                v-model="entityRef.parentId"
                :props="optionProp"
                :check-strictly="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="节点值">
              <el-input v-model.number="entityRef.value" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序">
              <el-input v-model.number="entityRef.sortNO" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示样式">
              <el-select v-model="entityRef.displayType">
                <el-option v-for="(item, key) in displayType" :key="key" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标签样式">
              <el-select v-model="entityRef.tagType">
                <el-option v-for="(item, key) in tagTypeRef" :key="key" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="entityRef.displayType === 'tag'">
            <el-form-item label="标签主题">
              <el-select v-model="entityRef.tagTheme">
                <el-option v-for="(item, key) in tagThemeRef" :key="key" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="节点code">
              <el-input v-model="entityRef.code" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input type="textarea" :rows="2" v-model="entityRef.remark" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align: center; display: flex; justify-content: center">
          <el-button v-if="currentRef != 3" type="primary" @click="submit">提交</el-button>
          <el-button type="danger" @click="dialogStatus = false">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<style></style>
